<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Liquid Flow Background</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000000;
        }
        .liquid {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            filter: url(#goo);
        }
        .blob {
            position: absolute;
            background: #ff00ff;
            border-radius: 50%;
            mix-blend-mode: screen;
            animation: move-blob 20s ease-in-out infinite alternate;
        }
        .blob:nth-child(2) {
            background: #00ffff;
            animation-duration: 25s;
            animation-delay: -5s;
        }
        .blob:nth-child(3) {
            background: #ffff00;
            animation-duration: 30s;
            animation-delay: -10s;
        }
        .blob:nth-child(4) {
            background: #ff00ff;
            animation-duration: 35s;
            animation-delay: -15s;
        }
        @keyframes move-blob {
            0%, 100% {
                transform: translate(0, 0) scale(1);
            }
            25% {
                transform: translate(50%, 25%) scale(0.8);
            }
            50% {
                transform: translate(25%, 50%) scale(1.2);
            }
            75% {
                transform: translate(-25%, 25%) scale(0.9);
            }
        }
    </style>
</head>
<body>
    <div class="background">
        <div class="liquid">
            <div class="blob" style="width: 40vw; height: 40vw; left: 10%; top: 10%;"></div>
            <div class="blob" style="width: 35vw; height: 35vw; right: 10%; top: 20%;"></div>
            <div class="blob" style="width: 45vw; height: 45vw; left: 20%; bottom: 20%;"></div>
            <div class="blob" style="width: 30vw; height: 30vw; right: 20%; bottom: 10%;"></div>
        </div>
    </div>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display: none;">
        <defs>
            <filter id="goo">
                <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
                <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
                <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
            </filter>
        </defs>
    </svg>
</body>
</html>